import React from "react"

let count = 0

class LifeCb extends React.Component {
  constructor() {
    console.log("constructor")
    super()
    this.state = {
      msg: "初始msg"
    }
  }

  changeText() {
    this.setState({
      msg: "第" + count + "次的msg"
    })
  }

  // 这个应该是一个纯函数，拿来展示, 但是不要setState会死循环
  render() {
    count++
    return (
      <div>
        <div>{this.state.msg}</div>
        <button
          onClick={() => {
            this.changeText()
          }}
        >
          切换
        </button>
      </div>
    )
  }

  // 组件挂载到dom里的生命周期
  componentDidMount() {
    console.log("componentDidMount 挂载")
  }

  // 是否应该更改数据就自动驱动视图更新，return Boolean, 后期拿来节省性能
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    return true
  }
  // 每次更新数据调用componentDidUpdate => render前， 会调用这个函数进行数据快照
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevState, "getSnapshotBeforeUpdate 快照")
    return prevState
  }

  // 组件更新数据的生命周期
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate 更新", prevState, snapshot)
  }

  // 组件销毁的生命周期
  componentWillUnmount() {
    console.log("componentWillUnmount 卸载")
  }
}

export default LifeCb
